// 页面根元素样式
.page-box
  height 100%
  overflow-y auto
  background #F0F2F6
  padding 10px
  box-sizing border-box
  &::-webkit-scrollbar
    width 0
    height 0
  &::-webkit-scrollbar-thumb
    border-radius 4px
    -webkit-box-shadow inset 0 0 5px rgba(0,0,0,0.2);
    background #CCE5FF
  &::-webkit-scrollbar-track
    background transparent
/**
 * ml代表margin-left
 */
.ml8
  margin-left 8px
.ml10
  margin-left 10px
.ml12
  margin-left 12px
.ml16
  margin-left 16px
.ml20
  margin-left 20px
.ml30
  margin-left 30px
/**
 * mr代表margin-right
 */
.mr8
  margin-right 8px
.mr10
  margin-right 10px
.mr12
  margin-right 12px
.mr16
  margin-right 16px
.mr20
  margin-right 20px
.mr30
  margin-right 30px
/**
 * mt代表margin-top
 */
.mt8
  margin-top 8px
.mt10
  margin-top 10px
.mt12
  margin-top 12px
.mt16
  margin-top 16px
.mt20
  margin-top 20px
.mt30
  margin-top 30px
/**
 * mb代表margin-bottom
 */
.mb8
  margin-bottom 8px
.mb10
  margin-bottom 10px
.mb12
  margin-bottom 12px
.mb16
  margin-bottom 16px
.mb20
  margin-bottom 20px
.mb30
  margin-bottom 30px
/*头部样式*/
.header
  width 100%
  display flex
  align-items center
  justify-content space-between
  .header-left, .header-right
    display flex
    align-items center
/*表格样式*/
// 表格操作栏按钮样式
.el-table
  .cell
    color #5E5E66!important
  .table-btn
    display inline-block
    font-size 12px
    color #4C84FF
    cursor pointer
    & + .table-btn
      margin-left 20px
    &.stop
      color #FF9536
// 头部灰色每行有下划线
.table-border.el-table
  border none
  border-top 1px solid #EAEDF7
  border-radius 0
  th,
  thead.has-gutter th
    background-color rgba(239,240,246, 0.5)
  td
    border-color#EAEDF7
  tbody 
    tr:hover>td
      background-color rgba(239,240,246, 0.5)
// 隔行渐变
.table-stripe.el-table
  border none
  border-radius 0
  &::before
    display none
  thead.has-gutter th
    border none
  td
    border none
  th.is-leaf
    border none
  tr:nth-of-type(2n+1) td
    background-color rgba(239,240,246, 0.5)
  tbody 
    tr:hover>td
      background-color rgba(239,240,246, 0.5)
  .el-table__fixed-right::before
    display none
/**
 * 搜索位置的input样式
 * 给class为search-input-box的包裹元素设置样式控制input大小
 */
.search-input-box
  display inline-block
  width 200px
  height 32px
  line-height: 32px
  font-size 0
  &.search-suffix
    .el-input__inner
      padding-right 60px
  .el-input
    width 100%
    max-width 100%
    height 100%
    line-height 1
    .el-input__inner
      width 100%
      max-width 100%
      height 100%
      border: 1px solid #E9EAED;
      font-size 12px
      color #5E5E66
      &:focus
        border-color #409eff
      &::placeholder
        color #888B9C
        font-size 12px
    .el-input__suffix
      right 1px
      top 1px
      height calc(100% - 2px)
      width 30px
      border-radius 0 4px 4px 0
      .el-input__suffix-inner
        position relative
        display block
        height 100%
      .el-input__icon
        position absolute
        top 50%
        left 50%
        transform translate(-50%, -50%)
        height 18px !important
        line-height 18px
    .el-input__prefix
      padded_box(border-box,5px 0 0)

/**
 * 搜索位置的select样式
 * 给class为search-select-box的包裹元素设置样式控制下拉菜单大小
 */
.search-select-box
  display inline-block
  width 160px
  height 32px
  line-height: 32px
  font-size 0
  .el-select,.el-input
    width 100%
    max-width 100%
    height 100%
    line-height 1
    .el-input__inner
      width 100%
      max-width 100%
      height 100%
      border: 1px solid #E9EAED;
      font-size 12px
      color #5E5E66
      &::placeholder
        color #888B9C
        font-size 12px
    .el-input__icon
      line-height 1
/**
 * 搜索位置的日期范围样式
 * 给class为search-date-picker的包裹元素设置样式控制input大小
 */
.search-date-picker
  display inline-block
  width 244px
  height 32px
  line-height 32px
  font-size 0
  .el-range-editor
    width 100%
    max-width 100%
    height 100%
    line-height 1
    border: 1px solid #E9E9F2;
    .el-range__icon
      line-height: 24px
    .el-range-input
      height 100%
      line-height 1
      color #5A5C5F
      &::placeholder
        color #888B9C
        font-size 12px
    .el-range-separator
      width 24px
      line-height: 24px
      color #5A5C5F
    .el-range__close-icon
      line-height: 24px
/**
 * 搜索位置的Dropdown下拉菜单样式
 * 给class为search-dropdown-box的包裹元素设置样式控制下拉菜单大小
 */
.search-dropdown-box
  display inline-block
  width 114px
  height 32px
  line-height 32px
  font-size 0
  .el-dropdown
    width 100%
    max-width 100%
    height 100%
    line-height 1
    .el-button
      width 100%
      max-width 100%
      height 100%
      line-height 1
      padding 0 16px
      border-radius: 6px;
      &.el-button--primary
        background: #4C84FF;
/**
 * 搜索位置的checkbox样式
 * 给class为search-checkbox-box包裹的元素设置样式控制checkbox样式
 */
 .search-checkbox-box
  display inline-block
  font-size 0
  .el-checkbox
    .el-checkbox__label
      color #5E5E66
    &.is-checked
      .el-checkbox__inner
        background-color: #4C84FF;
        border-color: #4C84FF;
      .el-checkbox__label
        color #5E5E66
/**
 * 表单位置的input样式
 * 给class为form-input-box的包裹元素设置样式控制input大小
 */
.form-input-box
  display inline-block
  width 300px
  height 36px
  line-height: 36px
  font-size 0
  .el-input
    width 100%
    max-width 100%
    height 100%
    line-height 1
    .el-input__inner
      width 100%
      max-width 100%
      height 100%
      border: 1px solid #E9EAED;
      font-size 12px
      color #22242F
      &::placeholder
        color #C5C6CD
        font-size 12px
    .el-input__suffix
      right 10px
      .el-input__count
        color #C5C6CD
        font-size 12px
    .el-input__prefix
      padded_box(border-box,5px 0 0)
  .el-textarea
    .el-textarea__inner
      border: 1px solid #E9EAED;
    .el-input__count
      color #C5C6CD
      font-size 12px
/**
 * 表单位置的select样式
 * 给class为form-select-box的包裹元素设置样式控制下拉菜单大小
 */
.form-select-box
  display inline-block
  width 160px
  height 36px
  line-height: 36px
  font-size 0
  // &.bgColor
  //   background: #FAFCFE;
  .el-select,.el-input
    width 100%
    max-width 100%
    height 100%
    line-height 1
    .el-input__inner
      width 100%
      max-width 100%
      height 100%
      border: 1px solid #E9EAED;
      font-size 12px
      color #22242F
      &::placeholder
        color #C5C6CD
        font-size 12px
    .el-input__icon
      line-height 1
/**
 * 表单位置的日期范围样式
 * 给class为form-date-picker的包裹元素设置样式控制日期控件大小
 */
.form-date-picker
  display inline-block
  width 314px
  height 36px
  line-height 36px
  font-size 0
  // &.bgColor
  //   background: #FAFCFE;
  // 日期范围选择
  .el-range-editor
    width 100%
    max-width 100%
    height 100%
    line-height 1
    border: 1px solid #E9EAED;
    .el-range-input
      height 100%
      line-height 1
      color #22242F
      &::placeholder
        color #C5C6CD
        font-size 12px
    .el-range-separator
      color #66666D
  // 单个日期选择
  .el-date-editor
    width 100%
    max-width 100%
    height 100%
    line-height 1
    border: 1px solid #E9EAED;
    border-radius: 4px
    box-sizing: border-box
    .el-input__inner
      height 100%
      line-height 1
      color #22242F
      border none
      &::placeholder
        color #C5C6CD
        font-size 12px
    .el-input__prefix
      .el-input__icon
        line-height 1
/**
 * 表单位置的cascader样式
 * 给class为form-cascader-box的包裹元素设置样式控制级联选择器大小
 */
.form-cascader-box
  display inline-block
  width 195px
  height 36px
  line-height 36px
  font-size 0
  .el-cascader,.el-input
    width 100%
    max-width 100%
    height 100%
    line-height 1
    .el-input__inner
      width 100%
      max-width 100%
      height 100%
      border: 1px solid #E9EAED;
      font-size 12px
      color #22242F
      &::placeholder
        color #C5C6CD
        font-size 12px
      // &:hover
      //   border-color #E9EAED
/**
 * switch开关样式
 * switch-small的el-switch元素设置样式
 */
.switch-small
  .el-switch__core
    width 32px !important
    height 20px !important
    border-radius 10px !important
    &::after
      width 16px
      height 16px
  &.is-checked .el-switch__core
    background rgba(76, 132, 255, 1)
    &::after
      margin-left -17px !important
  .el-switch__label,
  .el-switch__label.is-active
    color #888b9c
/**
 * radio 选中样式
 */
.el-radio
  .el-radio__input
    &.is-checked
      .el-radio__inner
        background #fff
        border: 1px solid #4C84FF;
        &::after
          width 9px
          height 9px
          background #4C84FF
/**
 * checkbox 选中
 */
.el-checkbox
  .el-checkbox__input
    &.is-checked
      .el-checkbox__inner
        background-color #4C84FF
        border-color: #4C84FF
/**
 * label必填标星样式
 */
.label-required
  position relative
  &::after
    content '*'
    display block
    position absolute
    right -8px
    top 0
    bottom 0
    margin auto
    color red
    font-size 14px
    height: 14px
    line-height 14px
.label-required-colon
  margin-left 5px
/*
* 表单数字输入框的样式
*/
.form-input-number-box
  width 170px
  height 36px
  .el-input__inner
    height 36px
    line-height 36px
    box-sizing border-box
  .el-input-number
    width 100%
    height 100%
    line-height 34px
    .el-input-number__decrease
      width 46px!important
      height 34px!important
      background #fff
    .el-input-number__increase
      width 46px!important
      height 34px!important
      background #fff
    .el-icon-plus
      color #22242F
      font-weight 600
    .el-icon-minus
      color #22242F
      font-weight 600
/*
* tabs卡片模式样式, 在组件上加上.split-tab-card
*/
.split-tab-card
  .el-tabs__header
    border-bottom 1px solid #EAEDF7
    .el-tabs__nav
      border none
      .el-tabs__item
        height 46px
        line-height 46px
        padding 0 15px !important
        border-radius: 4px 4px 0px 0px;
        border-top 1px solid #EAEDF7
        border-right 1px solid #EAEDF7
        border-left 1px solid #EAEDF7
        margin-right 6px

.pointer
  cursor pointer